<template>
  <div class="states">
    <table class="table is-fullwidth">
      <thead>
        <th>统计项</th>
        <th>数量</th>
      </thead>
      <tbody>
        <tr>
          <td>事项总数</td>
          <td>{{ totalNotesCount }}</td>
        </tr>
        <tr>
          <td>总字数</td>
          <td>{{ totalCharactersCount }}</td>
        </tr>
        <tr>
          <td>总评论数</td>
          <td>{{ totalCommentCount }}</td>
        </tr>
      </tbody>
    </table>
    <div class="input_append">
      <input v-model="inputValue" v-autofocus class="input" placeholder="你喜欢该记事本吗?" type="text" :maxlength="50">
      <span class="inputLength">{{ inputValue.length }}/50</span>

      <div class="list">
        <div class="item" v-if="comments">
          <div class="info" v-for="(item, index) in comments" :key="index">
            <!-- <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p> -->
            <p class="name">@清风徐来</p>
            <p class="text">{{ item.content }}</p>
            <p class="time">#{{ item.time }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useNotesStore, useCommentStore } from '@/stores'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { vAutofocus } from '@/directives/focus'
import { storeToRefs } from 'pinia'
import { useDark, useToggle } from '@vueuse/core'
// import { useWatch } from '@/composables/useWatchCharacters.js'

const isDark = useDark()
const toggleDark = useToggle(isDark)


const noteStore = useNotesStore()
const {
  totalNotesCount,
  totalCharactersCount
} = storeToRefs(noteStore);

const commentStore = useCommentStore()
const { comments, totalCommentCount } = storeToRefs(commentStore)
const { handleInputMessage } = commentStore

// useWatch(inputValue);
const inputValue = ref('')
const onKeyUp = (e) => {
  if (e.key === 'Enter') {
    handleInputMessage(inputValue)
    inputValue.value = ''
  }
}
onMounted(() => {
  document.addEventListener('keyup', onKeyUp)
});
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onKeyUp)
});

</script>

<style lang="scss" scoped>
.table {
  font-family: 'Times New Roman', Times, serif;
  text-align: center;

  th {
    text-align: center;
  }
}

.input_append {
  position: relative;

  .inputLength {
    position: absolute;
    right: 8px;
    top: 8px;
    color: rgb(188, 188, 188);
  }
}

.list {
  margin-top: 20px;
  min-width: 400px;
  max-width: 800px;
  display: flex;

  .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;

    .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;

      .text {
        margin: 0;
      }
    }

    .name {
      margin-top: 10px;
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .text {
      color: #333;
      padding: 10px 0;
    }

    .time {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>